<template>
	<div id="app">
		<button class="btn btn-outline-danger">危险按钮!</button>
		<button class="btn btn-danger">阿斯顿发生</button>
		<h1 class="h4 text-danger">{{msg}}</h1>

		<div class="row">
			<div class="col-sm-8 my-new">8</div>
			<div class="col-sm-4 my-new">4</div>
		</div>

		<el-button type="success">dddd</el-button>
		<el-button type="success" icon="el-icon-eleme">edit</el-button>
		<p class="el-icon-eleme">嗨</p>
		<p class="el-icon-edit">麦</p>
		<br>

		<el-row>
			<el-col :span="8">
				<div class="my-col"></div>
			</el-col>
			<el-col :span="8">
				<div class="my-col"></div>
			</el-col>
			<el-col :span="8">
				<div class="my-col"></div>
			</el-col>
		</el-row>

		<date-pick></date-pick>
		<myppp @click.native="get"></myppp>

	</div>
</template>

<script>

    import datePick from './components/date'
    import myppp from './components/mypp'

    export default {
        name: 'app',
        components: {
            datePick,
            myppp
        },
        methods: {
            get(){
                alert('--')
            }
        },
        data: () => {
            return {
                msg: 'sssssss'
            }
        }
    }
</script>

<style scoped lang="less">

	@mycolor: #097865;
	@element-ccc: #87ccac;

	.my-new {
		border: 1px solid @mycolor;
	}

	.my-col {
		border: 1px solid @element-ccc;
		height: 89px;
		background-color: bisque;
	}
</style>
